<template>

    <div class="bar" id="bar" :style="{ width: 600 + 'px', height: 400 + 'px' }">
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted,watch ,ref} from 'vue'
//  echarts 图表，本质是生成dom

// 接收一个父组件传递的数据
let props:any =  defineProps({
    echartsList:{
        type:Object,
    }
})

watch(()=>props,(newVal:any)=>{
    console.log(newVal,22222);    
    // 创建（绘画）图表   =》 需要用一个方法
    getEchartT(newVal.echartsList)

},{
    deep:true
})

let echartsDom:any = ref('')

// 配置图表信息
const getEchartT = (obj:any)=>{
    // var myChart = echarts.init(document.getElementById('bar'));   // 这里会创建dom结构，使用另一个方法
    // var echartsDom.value = echarts.init(document.getElementById('bar')); //这句不需要了
    // console.log(props.echartsList.xdata,'父组件给子组件的 异步数据'); // 获取不到值，是空的
    
    // echarts属性
    let option=  {
        xAxis: {
            type: 'category',
            // data: props.echartsList.xdata
            data: obj.xdata
        },
        yAxis: {
            type: 'value',
            splitLine:{   //背景设置成虚线
                show:true,
                lineStyle:{
                    type:'dashed'
                }
            }
        },
        series: [
            {
                // data: [120, 200, 150, 80, 170, 110, 130],
                data: obj.list,
                type: 'bar'
            }
        ]
    };
    echartsDom.value.setOption(option);  // 然后这里就是添加数据
}

onMounted(()=>{  //组件的生命周期 =》 组件创建 执行一次
    // echartsDom.value = echarts.init(document.getElementById('bar'));  //组件一创建，此dom结构也创建了
})


// 总结  项目中的echarts 二次封装 （只要有可视化图表就需要）
/**
 *  1. 创建一个单独的文件 =》 初始化 一项echarts实例对象
 *  2。 因为我们工作中，可视化图表都是动态的数据，我又进行封装，通过watch 获取到异步数据
 *      再触发 echarts 配置图表的方法 （为什么这样： 组件的渲染和组件的数据 前者更快）
 * 
 *   1）因为我写项目都是组件化开发，方便后期的复用和维护
 *      组件渲染关系：渲染父子组件
 *      数据： 如果这个子组件的数据是异步，我需要在逻辑层 获取到这个数据，使用watch方法
 *          watch实时更新echarts图表的配置信息
 *  3. 怎么处理样式 =》 ui给的可视化图表
 *      1. 先到echarts 案例中找
 *      2. 百度 
 * 
 * **/


</script>

<style>

</style>